<template>
  <div class="wms-merchant-search">
    <ElForm
      ref="searchFormRef"
      :model="searchForm"
      inline
      label-width="68px"
      class="search-form"
    >
      <ElFormItem label="商户编号" prop="merchantCode">
        <ElInput
          v-model="searchForm.merchantCode"
          placeholder="请输入商户编号"
          clearable
          class="w-48"
          @keyup.enter="handleSearch"
        />
      </ElFormItem>

      <ElFormItem label="商户名称" prop="merchantName">
        <ElInput
          v-model="searchForm.merchantName"
          placeholder="请输入商户名称"
          clearable
          class="w-48"
          @keyup.enter="handleSearch"
        />
      </ElFormItem>

      <ElFormItem label="企业类型" prop="merchantType">
        <ElSelect
          v-model="searchForm.merchantType"
          placeholder="请选择企业类型"
          clearable
          class="w-48"
        >
          <ElOption
            v-for="type in merchantTypeOptions"
            :key="type.value"
            :label="type.label"
            :value="type.value"
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="状态" prop="status">
        <ElSelect
          v-model="searchForm.status"
          placeholder="请选择状态"
          clearable
          class="w-32"
        >
          <ElOption label="启用" value="1" />
          <ElOption label="禁用" value="0" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem>
        <div class="flex gap-2">
          <ElButton
            type="primary"
            icon="Search"
            @click="handleSearch"
            :loading="searching"
          >
            搜索
          </ElButton>
          <ElButton icon="Refresh" @click="handleReset">
            重置
          </ElButton>
        </div>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
/**
 * 商户搜索组件
 * 参照原项目 RuoYi-WMS-VUE/src/views/wms/basic/merchant/index.vue 的搜索表单逻辑
 * 用 art-design-pro 风格重新实现
 */
import { ref, reactive } from "vue";
import type { FormInstance } from "element-plus";

/** 商户类型选项 - 参照原项目的字典数据 */
const merchantTypeOptions = [
  { label: "生产企业", value: "1" },
  { label: "贸易企业", value: "2" },
  { label: "物流企业", value: "3" },
  { label: "电商企业", value: "4" },
  { label: "其他", value: "9" },
];

/** 搜索表单数据结构 */
interface SearchFormData {
  merchantCode?: string;
  merchantName?: string;
  merchantType?: string;
  status?: string;
}

/** Props */
interface Props {
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false,
});

/** Emits */
interface Emits {
  (event: "search", params: SearchFormData): void;
  (event: "reset"): void;
}

const emit = defineEmits<Emits>();

/** 响应式数据 */
const searchFormRef = ref<FormInstance>();
const searching = ref(false);

/** 搜索表单数据 - 参照原项目的 queryParams 结构 */
const searchForm = reactive<SearchFormData>({
  merchantCode: undefined,
  merchantName: undefined,
  merchantType: undefined,
  status: undefined,
});

/** 搜索处理 */
function handleSearch() {
  if (searching.value) return;
  
  searching.value = true;
  
  // 构建搜索参数，过滤空值
  const searchParams = Object.entries(searchForm).reduce((params, [key, value]) => {
    if (value !== undefined && value !== null && value !== '') {
      params[key] = value;
    }
    return params;
  }, {} as SearchFormData);

  console.log('[商户搜索] 搜索参数:', searchParams);
  
  emit("search", searchParams);
  
  // 模拟搜索延时
  setTimeout(() => {
    searching.value = false;
  }, 500);
}

/** 重置处理 */
function handleReset() {
  searchFormRef.value?.resetFields();
  
  // 手动重置表单数据
  Object.keys(searchForm).forEach(key => {
    searchForm[key as keyof SearchFormData] = undefined;
  });
  
  console.log('[商户搜索] 重置搜索条件');
  emit("reset");
}

/** 获取搜索参数 - 供父组件调用 */
function getSearchParams(): SearchFormData {
  return { ...searchForm };
}

/** 设置搜索参数 - 供父组件调用 */
function setSearchParams(params: Partial<SearchFormData>) {
  Object.assign(searchForm, params);
}

/** 暴露方法给父组件 */
defineExpose({
  getSearchParams,
  setSearchParams,
  handleSearch,
  handleReset,
});
</script>

<style scoped>
.wms-merchant-search {
  @apply bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-4;
}

.search-form {
  @apply flex flex-wrap gap-4;
}

.search-form :deep(.el-form-item) {
  @apply mb-4;
}

.search-form :deep(.el-form-item__label) {
  @apply text-gray-700 font-medium;
}

.search-form :deep(.el-input__wrapper) {
  @apply shadow-sm;
}

.search-form :deep(.el-select .el-input__wrapper) {
  @apply shadow-sm;
}

/** 响应式设计 */
@media (max-width: 768px) {
  .search-form {
    @apply flex-col gap-2;
  }
  
  .search-form :deep(.el-form-item) {
    @apply mb-2;
  }
}
</style>
